<template>
  <el-card>
    <!-- table主体 -->
    <div class="select-top" style="color: #666">
      <p>已选择</p>
      <p style="margin: 0px 10px 0px 10px; color: rgb(102.2, 177.4, 255)">
        {{ selectionLength }}
      </p>
      <p>项</p>
    </div>
    <el-table
      v-bind="$attrs"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="columnType" :type="columnType" width="55">
        <template v-if="columnType === 'expand'" #default="scope">
          <slot name="expand" :row="scope.row" :index="scope.$index" />
        </template>
      </el-table-column>
      <el-table-column
        v-for="column in columns"
        v-bind="column"
        :key="column.prop"
      >
        <template v-if="column.slot" #default="scope">
          <slot
            :name="column.slotName"
            :row="scope.row"
            :index="scope.$index"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="pagination" class="pagination-wrapper">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50]"
        :total="paginationConfig.total"
        v-model:page-size="paginationData.pageSize"
        v-model:currentPage="paginationData.currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

const props = withDefaults(
  defineProps<{
    tableData: Array<any>;
    columns: Array<any>;
    pagination: boolean;
    paginationConfig: any;
    columnType: string;
  }>(),
  {
    tableData: () => [],
    columns: () => [],
    pagination: false,
    paginationConfig: {
      total: 0,
      currentPage: 1,
      pageSize: 10,
    },
    columnType: "",
  },
);

const selectionLength = ref(0);

const emits = defineEmits<{
  (e: "page-change", currentPage: number): void;
  (e: "size-change", pageSize: number): void;
  (e: "selection-change", val: any): void;
}>();

const paginationData = reactive({
  currentPage: props.paginationConfig.currentPage,
  pageSize: props.paginationConfig.pageSize,
});

const handleCurrentChange = (currentPage: number) => {
  paginationData.currentPage = currentPage;
  emits("page-change", currentPage);
};

const handleSizeChange = (pageSize: number) => {
  paginationData.pageSize = pageSize;
  emits("size-change", pageSize);
};

const handleSelectionChange = (val: any) => {
  selectionLength.value = val.length;
  emits("selection-change", val);
};
</script>

<style lang="scss" scoped>
.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.select-top {
  width: 100%;
  height: 60px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  background-color: rgba(247, 137, 137, 0.1);
  border-radius: 8px;
  padding-left: 20px;
  box-sizing: border-box;
}
</style>
